<template>
  <div class="thresholdSituation">
    <!-- 内容区域 -->
    <div class="content">
      <TableList
        :tableDataSource="state.tableDataSource"
        :tableColumns="state.tableColumns"
        rowKey="tmMin"
        @cellClick="cellClick"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, watch, inject, onMounted } from "vue";
  import TableList from "@/components/TableList";

  defineOptions({ name: 'ThresholdSituation' });

  const state = reactive({
    tableDataSource: [],
    tableColumns: [
      { dataIndex: "time", title: "预警类型", align: "center" },
      { dataIndex: "drp", title: "预警等级", align: "center" },
      { dataIndex: "dyp", title: "测站超警指标", align: "center" },
      { dataIndex: "dyp", title: "阈值历时(分钟)", align: "center" },
      { dataIndex: "dyp", title: "指标阈值", align: "center" },
      { dataIndex: "time", title: "指标单位", align: "center" },
      { dataIndex: "drp", title: "指标描述", align: "center" },
      { dataIndex: "dyp", title: "备注", align: "center" },
      { dataIndex: "dyp", title: "指标生效时间", align: "center" },
    ],
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .thresholdSituation {
    width: 100%;
    height: 100%;
    .header {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      ::v-deep(.ant-form-item) {
        margin-bottom: 0 !important;
      }
      .step {
        margin-left: 10px;
        margin-right: 30px;
      }
    }
    .content {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;
      align-items: center;
      position: relative;
    }
  }
</style>
